<template>
	<view class="my-comments">
		<!-- 顶部统计 -->
		<view class="stats-section">
			<text class="stats-title">我的评论 ({{totalComments}})</text>
		</view>
		
		<!-- 评论列表 -->
		<view class="comment-list">
			<view class="comment-item" v-for="(item, index) in allComments" :key="index">
				<!-- 文章信息 -->
				<view class="article-info" @tap="goToArticle(item.rticleaId)">
					<text class="article-title">{{item.rticleaTitle}}</text>
					<text class="article-time">{{item.rticleaTime}}</text>
				</view>
				
				<!-- 评论内容 -->
				<view class="comment-content">
					<view class="comment-text">{{item.content}}</view>
					<view class="comment-footer">
						<text class="comment-time">{{item.createTime}}</text>
						<view class="comment-actions">
							<button class="action-btn delete" @tap="deleteComment(index, item)">删除</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-state" v-if="allComments.length === 0">
			<!-- <image src="/static/empty.png" mode="aspectFit"></image> -->
			<text>还没有发表过评论哦</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allComments: [],
				totalComments: 0,
				userInfo: {}
			}
		},
// 使用onLoad而不是onShow，确保页面加载时执行
		// onLoad() {
		// 	this.loadAllComments()
		// },
		// 保留onShow以便在页面重新显示时刷新数据
		onShow() {
			this.loadUserInfo()
			this.loadAllComments() // 重新加载评论，以显示最新数据
		},
		methods: {
			// 加载用户信息
			loadUserInfo() {
				this.userInfo = {
					userName: '微信用户',
					userAvatar: '/static/icon/user.png'
				}
			},
			
			// 加载所有评论
			loadAllComments() {
				try {
					// 获取所有本地存储的key
					const keys = uni.getStorageInfoSync().keys
					let allComments = []
					
					// 筛选出评论相关的key
					const commentKeys = keys.filter(key => key.startsWith('article_comments_'))
					// 遍历所有评论
					commentKeys.forEach(key => {
						const rticleaId = key.split('article_comments_')[1]
						const comments = uni.getStorageSync(key)
						if (comments) {
							const articleComments = JSON.parse(comments)
							// 获取当前用户的评论
							const userComments = articleComments.filter(comment => 
								comment.userName === this.userInfo.userName
							)
							
							// 获取文章信息
							const rticleaData = this.getRticleaData(rticleaId)
							if (rticleaData) {
								userComments.forEach(comment => {
									allComments.push({
										...comment,
										rticleaId,
										rticleaTitle: rticleaData.rticleaTitle,
										rticleaTime: rticleaData.rticleaTime
									})
								})
							}
						}
					})
					
					// 按时间倒序排序
					allComments.sort((a, b) => new Date(b.createTime) - new Date(a.createTime))
					
					this.allComments = allComments
					this.totalComments = allComments.length
					
				} catch (e) {
					console.error('加载评论失败:', e)
					uni.showToast({
						title: '加载评论失败',
						icon: 'none'
					})
				}
			},
			
			// 获取文章数据
			getRticleaData(rticleaId) {
				try {
					// 从本地存储获取文章数据
					const key = `rticlea_${rticleaId}`
					const rticleaData = uni.getStorageSync(key)
					return rticleaData ? JSON.parse(rticleaData) : null
				} catch (e) {
					console.error('获取文章数据失败:', e)
					return null
				}
			},
			
			// 跳转到文章详情
			goToArticle(rticleaId) {
				uni.navigateTo({
					url: `/pages/rticleaInfo/rticleaInfo?rticleaId=${rticleaId}`
				})
			},
			
			// 删除评论
			deleteComment(index, comment) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这条评论吗？',
					success: (res) => {
						if (res.confirm) {
							try {
								const key = `article_comments_${comment.rticleaId}`
								const comments = uni.getStorageSync(key)
								if (comments) {
									const commentsList = JSON.parse(comments)
									const newComments = commentsList.filter(item => item.id !== comment.id)
									uni.setStorageSync(key, JSON.stringify(newComments))
									
									// 更新显示
									this.allComments.splice(index, 1)
									this.totalComments--
									
									uni.showToast({
										title: '删除成功',
										icon: 'success'
									})
								}
							} catch (e) {
								console.error('删除评论失败:', e)
								uni.showToast({
									title: '删除失败',
									icon: 'none'
								})
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.my-comments {
	min-height: 100vh;
	background-color: #f5f5f5;
	
	.stats-section {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.stats-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
	}
	
	.comment-list {
		.comment-item {
			background-color: #fff;
			margin-bottom: 20rpx;
			padding: 20rpx;
			
			.article-info {
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #eee;
				
				.article-title {
					font-size: 28rpx;
					color: #007AFF;
					margin-bottom: 10rpx;
					display: block;
				}
				
				.article-time {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.comment-content {
				padding-top: 20rpx;
				
				.comment-text {
					font-size: 28rpx;
					color: #333;
					line-height: 1.5;
					margin-bottom: 20rpx;
				}
				
				.comment-footer {
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.comment-time {
						font-size: 24rpx;
						color: #999;
					}
					
					.comment-actions {
						.action-btn {
							font-size: 24rpx;
							padding: 8rpx 20rpx;
							border-radius: 25rpx;
							margin-left: 20rpx;
							
							&.delete {
								color: #ff5a5f;
								border: 1rpx solid #ff5a5f;
								background-color: #fff;
							}
						}
					}
				}
			}
		}
	}
	
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 200rpx;
		
		image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}
		
		text {
			font-size: 28rpx;
			color: #999;
		}
	}
}
</style>